<template lang="">
    <div class="main">
        <van-nav-bar title="协议签署" />
        <div class="content">
            <div>劳务协议</div> 
            <div>甲 方：中国初级卫生保健基金会</div>    
            <div>联系地址：北京市朝阳区安华里五区21号楼3层315室</div>    
            <div>乙 方：王婷</div>    
            <div>身份证号：320404198507013424</div>    
            <div>联系电话：13585318011</div>    
            <div>联系地址：江苏省常州市天宁区青龙街道洋头桥村委东歧村124号</div>    
            <div>
                血小板减少是指血液中血小板计数<100×109/L。血小板减少见于多种血液性疾病、风湿免疫病、放化疗损伤及药物相关性血小板减少，如原发免疫性血小板减少症（immune thrombocytopenia，ITP），再生障碍性贫血（aplastic anemia，AA），肿瘤治疗相关血小板减少症(Chemotherapy-Induced Thrombocytopenia，CTIT)，骨髓增生异常综合征 (myelodysplastic syndromes, MDS)等。 基于上述背景，为解决我国血小板减少症领域面临的问题，提升我国临床专家在血小板减少症领域的科研能力，中国初级卫生保健基金会决定在中国血液病患者数字化全程管理及科研转化工程下设立“海曲泊帕乙醇胺片治疗血小板减少患者多中心真实世界研究”公益项目，本次项目将于2024年01月至2027年01月进行，计划提供资金用于资助血小板减少症治疗领域的课题研究。 乙方为甲方“海曲泊帕乙醇胺片治疗血小板减少患者多中心真实世界研究”公益项目执行期间提供【数字化全程管理】劳务服务。
            </div>
        </div>
        <div class="sign-ctx">
            <div class="sign-title">请在下方签署区正楷签名</div>
            <vue-esign class="sign" ref="signDom" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" v-model:bgColor="bgColor" />

            <div class="sign-tip">
                <van-radio-group v-model="checked">
                    <van-radio name="1" icon-size="13px">我已阅读并同意以上协议</van-radio>
                </van-radio-group>
            </div>
        </div>
        <div class="ky-btn-box">
            <div class="ky-btn" @click="Sign()">确认提交</div>
        </div>
    </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getChatGroup, getLastMsg, sendMsg,sendSign } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
import vueEsign from "../components/sign.vue";
export default {
    components: {
        vueEsign
    },
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();

        const checked = ref("1")
        const signDom = ref(null)
        const isSign = ref(false)
        let id = 0;
        onMounted(() => {
            id = route.params.id ? route.params.id : 0
            if(!id){
                router.push("/JieSuan")
            }
        })
        const Sign = () => {
            sendSign({id:id}).then(res => {
                if(res.status == 'ok'){
                    router.push("JieSuan")
                }
                showToast(res.msg)
            })
            signDom.value.generate().then(res => {
                isSign.value = true
                
                //上传图片
            }).catch(err => {
                isSign.value = false
            })

        }
        return {
            checked,
            signDom,
            Sign,

            lineWidth: 6,
            lineColor: '#000000',
            bgColor: '',
            resultImg: '',
            isCrop: false
        }
    }
}
</script>
<style scoped>
.main {
    padding: 15px;
}

.content {
    padding: 15px;
    font-size: 15px;
    font-weight: 250;
    color: #3D3D3D;

    border-radius: 10px;
    border: 1px solid #0052D9;
}

.sign-ctx {
    margin-top: 10px;
}

.sign-title {
    font-weight: 250;
    color: #3D3D3D;
}

.sign-tip {
    font-size: 12px;
}

.ky-btn-box{
    padding: 15px;
    text-align: center;
}

.ky-btn{
    background: #0052D9;
    color: #FFFFFF;
    height: 4vh;
    line-height: 2;
    border-radius: 15px;
}
.sign{
    border: 1px solid #3D3D3D;
}
</style>